<template>
  <div class="userInfo">
    <!-- 头部NavBar -->
    <div class="navBarBox">
      <NavBar title="个人资料" routerLink="/users">
        <div></div>
      </NavBar>
    </div>

    <van-form @submit="onAmendSubmit">
      <van-cell-group inset>
        <!-- 上传图像 -->
        <van-field name="user_avatar" label="图像">
          <template #input>
            <van-uploader
              v-model="profile.user_avatar"
              multiple
              :max-count="1"
              :max-size="onOversize"
              :after-read="afterRead"
            />
          </template>
        </van-field>
        <!-- 昵称 -->
        <van-field
          v-model="profile.user_name"
          name="user_name"
          label="昵称"
          placeholder="昵称"
          :rules="[{ required: true, message: '请填写昵称' }]"
        />
        <!-- 性别 -->
        <van-field name="user_gender" label="性别">
          <template #input>
            <van-radio-group
              v-model="profile.user_gender"
              direction="horizontal"
            >
              <van-radio name="1">男</van-radio>
              <van-radio name="2">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <!-- 年龄 -->
        <van-field
          v-model="profile.user_age"
          name="user_age"
          type="digit"
          label="年龄"
          placeholder="年龄"
        />
        <!-- 地址 -->
        <van-field
          v-model="profile.user_address"
          is-link
          name="user_address"
          label="地址"
          placeholder="地址"
          @click="onHandleCity"
        />
        <!-- 简介 -->
        <van-field
          v-model="profile.user_intro"
          name="user_intro"
          rows="2"
          autosize
          label="简介"
          type="textarea"
          maxlength="50"
          placeholder="请输入简介"
          show-word-limit
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          修改资料
        </van-button>
      </div>
    </van-form>
  </div>
  <!-- 地址弹出框 -->
  <PubCity areaTitle="用户地区选择" v-if="store.state.user.isArea" />
  <!--  -->
</template>

<script>
import { ref, watchEffect } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { Toast } from "vant";
import NavBar from "@/components/NavBar/NavBar.vue";
import PubCity from "@/views/Publish/PubCity.vue";
import { postUploadavatar } from "@/api/home";
import { editUserInfo } from "@/api/user";
export default {
  name: "UserInfo",
  components: { NavBar, PubCity },
  setup() {
    const store = useStore();
    const router = useRouter();
    // 用户信息
    const profile = ref({
      // 用户id
      user_id: store.state.user.profile.user_id,
      // 昵称
      user_name: store.state.user.profile.user_name,
      // 头像
      user_avatar: store.state.user.profile.user_avatar
        ? [{ url: store.state.user.profile.user_avatar }]
        : [],
      // 性别
      user_gender: store.state.user.profile.user_gender,
      // 年龄
      user_age: store.state.user.profile.user_age,
      // 地址
      user_address: store.state.user.profile.user_address,
      // 简介
      user_intro: store.state.user.profile.user_intro,
    });
    console.log(profile.value);

    // 选择城市
    const onHandleCity = () => {
      store.commit("user/handleIsArea");
      watchEffect(() => {
        profile.value.user_address = store.state.user.city;
      });
    };
    // 返回后的图片
    // const imgValue = ref(store.state.user.profile.user_avatar);
    const imgValue = ref();
    // 修改个人资料
    const onAmendSubmit = () => {
      const form = {
        // 用户id
        user_id: store.state.user.profile.user_id,
        // 昵称
        user_name: profile.value.user_name,
        // 头像
        user_avatar: imgValue.value,
        // 性别
        user_gender: profile.value.user_gender,
        // 年龄
        user_age: profile.value.user_age,
        // 地址
        user_address: profile.value.user_address,
        // 简介
        user_intro: profile.value.user_intro,
      };
      editUserInfo(form).then((res) => {
        console.log(form.user_gender);
        console.log(res);
        if (res.status === 200) {
          store.commit("user/setUser", form);
          Toast("修改成功");
          router.push("/users");
        }
      });
      //退出用户信息编辑
      handleBack();
    };

    //图片上传
    const onOversize = (file) => {
      if (file.size / 1024 / 1024 > 1) {
        Toast("文件大小不能超过 1mb");
      }
      return file.size / 1024 / 1024 > 1;
    };
    const afterRead = (file) => {
      console.log(file, "file");
      // 此时可以自行将文件上传至服务器
      const fromdata = new FormData();
      fromdata.append("file", file.file);
      postUploadavatar(fromdata).then((res) => {
        console.log(res);
        if (res.code == 200) {
          console.log(res.data.filename);
          imgValue.value = res.data.filename;
          console.log(profile.value);
        }
      });
    };

    //退出用户信息编辑时 地址清空
    const handleBack = () => {
      store.commit("user/handleCity", null);
      router.push("/users");
    };
    return {
      store,
      profile,
      onHandleCity,
      onAmendSubmit,
      onOversize,
      afterRead,
      handleBack,
    };
  },
};
</script>

<style lang="less" scoped>
.userInfo {
  height: 100%;
  background-color: #fff;
}
.van-form .van-cell-group {
  margin: 0;
}
.van-button {
  background-color: aliceblue;
  color: sandybrown;
  font-size: 1.3rem;
  letter-spacing: 9px;
}
</style>
